<template>
  <Layout>
    <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0 newstyle">
            <div style="display:flex;">
              <div class="breadcrumb-item" v-for="(item,index) in items" :key="index">
                <span @click="jump(index)">{{item.text}}</span>
              </div>
            </div>
            <div class="title_right">查看该条数据生命周期</div>
          </h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title mb-3">
              <img src="@/assets/images/companies/img-1.png" alt="">
              沙河股份 000014.SZ
            </h4>
            <div class="basicInfo">
              <div>今开: 8.46</div>
              <div>昨收: 8.40</div>
              <div>最高: 9.24</div>
              <div>最低: 8.31</div>
              <div>成交量: 19.21万手</div>
              <div>成交额: 1.73亿</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">基本信息</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <tbody>
                  <tr>
                    <td class="tb">企业全称</td>
                    <td colspan="5">沙河实业股份有限公司</td>
                  </tr>
                  <tr>
                    <td class="tb">英文名称</td>
                    <td colspan="5">Shahe Industrial Co.,Ltd.</td>
                  </tr>
                  <tr>
                    <td class="tb">上市曾用名</td>
                    <td>深华源A->ST深华源->深华源A->沙河股份->G沙河</td>
                    <td class="tb">工商登记</td>
                    <td>914403006188016784</td>
                    <td class="tb">所属行业</td>
                    <td>房地产</td>
                  </tr>
                  <tr>
                    <td class="tb">注册资本(元)</td>
                    <td>2.017亿</td>
                    <td class="tb">雇员人数</td>
                    <td>153</td>
                    <td class="tb">管理人员人数</td>
                    <td>17</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">证券信息</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <tbody>
                  <tr>
                    <td class="tb">A股代码</td>
                    <td>000014</td>
                    <td class="tb">B股代码</td>
                    <td>--</td>
                    <td class="tb">H股代码</td>
                    <td>--</td>
                  </tr>
                  <tr>
                    <td class="tb">A股代码</td>
                    <td>沙河股份</td>
                    <td class="tb">B股代码</td>
                    <td>--</td>
                    <td class="tb">H股代码</td>
                    <td>--</td>
                  </tr>
                  <tr>
                    <td class="tb">证券类别</td>
                    <td>深交所主板A股</td>
                    <td class="tb">律师事务所</td>
                    <td>北京国枫(深圳)律师事务所</td>
                    <td class="tb">会计师事务所</td>
                    <td>普华永道中天会计师事务所(特殊普通合伙)</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">主营分析</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <thead>
                  <tr>
                    <th colspan="2">产品名称</th>
                    <th>营业收入(元)</th>
                    <th>营业收入比例</th>
                    <th>营业成本(元)</th>
                    <th>营业成本比例</th>
                    <th>营业利润比例</th>
                    <th>毛利率</th>
                  </tr>
                </thead>
                <tbody v-for="(item,index) in mainBusiness" :key="index">
                  <tr v-for="(v,idx) in item.data" :key="idx">
                    <td v-if="idx==0" :rowspan="item.data.length" style="vertical-align:middle;" align="center">{{item.type}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.income}}</td>
                    <td>{{v.incomeProportion}}</td>
                    <td>{{v.cost}}</td>
                    <td>{{v.costProportion}}</td>
                    <td>{{v.profitProportion}}</td>
                    <td>{{v.grossProfitMargin}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">重要人员</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <tbody>
                  <tr>
                    <td class="tb">董事长</td>
                    <td>陈勇</td>
                    <td class="tb">董秘</td>
                    <td>王凡</td>
                    <td class="tb">独立董事</td>
                    <td>王苏生，陈治民，赵晋琳</td>
                  </tr>
                  <tr>
                    <td class="tb">总经理</td>
                    <td>胡月明</td>
                    <td class="tb">法人代表</td>
                    <td>陈勇</td>
                    <td class="tb">证券事务代表</td>
                    <td>--</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">联系方式</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <tbody>
                  <tr>
                    <td class="tb">联系电话</td>
                    <td>0755-86090688</td>
                    <td class="tb">传真</td>
                    <td>0755-86090688</td>
                    <td class="tb">企业网址</td>
                    <td>www.shahe.cn</td>
                  </tr>
                  <tr>
                    <td class="tb">电子邮箱</td>
                    <td>shahe@shahe.cn</td>
                    <td class="tb">区域</td>
                    <td>广东</td>
                    <td class="tb">邮政编码</td>
                    <td>518053</td>
                  </tr>
                  <tr>
                    <td class="tb">办公地址</td>
                    <td colspan="5">广东省深圳市南山区白石路2222号沙河世纪楼</td>
                  </tr>
                  <tr>
                    <td class="tb">注册地址</td>
                    <td colspan="5">广东省深圳市南山区白石路2222号沙河世纪楼</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">企业高管</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>学历</th>
                    <th>职务</th>
                    <th>薪酬</th>
                    <th>持股数</th>
                    <th>持股比例</th>
                    <th>最终受益股份</th>
                    <th>本届任期</th>
                    <th>公告日期</th>
                    <th>个人简介</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>陈勇</td>
                    <td>男</td>
                    <td>52岁</td>
                    <td>硕士</td>
                    <td>董事长,董事</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>2013-08-02 至 2023-04-20</td>
                    <td>2020-04-25</td>
                    <td>详情</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>胡月明</td>
                    <td>男</td>
                    <td>51岁</td>
                    <td>硕士</td>
                    <td>董事</td>
                    <td>91.92万</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td>2020-04-21 至 2023-04-20</td>
                    <td>2020-04-25</td>
                    <td>详情</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">参股控股企业</h4>
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>交易方</th>
                    <th>关联关系</th>
                    <th>是否存在控制关系</th>
                    <th>交易金额</th>
                    <th>交易方式</th>
                    <th>支付方式</th>
                    <th>公告日期</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>深业沙河(集团)有限公司</td>
                    <td>控股股东</td>
                    <td>是</td>
                    <td>613.45万人民币</td>
                    <td>资产收购</td>
                    <td>-</td>
                    <td>2020-08-29</td>
                    <td>详情</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>深业沙河(集团)有限公司</td>
                    <td>控股股东</td>
                    <td>是</td>
                    <td>3500万人民币</td>
                    <td>担保</td>
                    <td>-</td>
                    <td>2020-03-27</td>
                    <td>详情</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <h4 class="card-title">财务分析</h4>
            <div class="row">
              <div class="col-xl-2">
                <b-button-group vertical>
                  <b-button @click="changefinancialAnalysis(item)" v-for="(item,index) in financialAnalysisList" :key="index" :variant="item==financialAnalysis?'primary':'light'">{{item}}</b-button>
                </b-button-group>
              </div>
              <div class="col-xl-10">
                <apexchart
                  class="apex-charts"
                  height="200"
                  ref="chart"
                  :series="series"
                  :options="chartOptions"
                ></apexchart>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
export default {
  components: {
    Layout,
  },
  data () {
    return {
      items: [
        {
          text: "数仓管理",
          url: "/datahouse",
        },{
          text: "上市公司详情",
          url: "/",
        }
      ],
      mainBusiness: [
        {
          type: "按行业",
          data: [
            {
              name: "房地产销售",
              income: "1131.19万",
              incomeProportion: "63.29%",
              cost: "750.76万",
              costProportion: "58.82%",
              profitProportion: "74.43%",
              grossProfitMargin: "33.63%",
            },{
              name: "租金收入",
              income: "477.06万",
              incomeProportion: "26.69%",
              cost: "264.75万",
              costProportion: "20.74%",
              profitProportion: "41.54%",
              grossProfitMargin: "44.5%",
            },{
              name: "其他",
              income: "90.82万",
              incomeProportion: "5.08%",
              cost: "90.82万",
              costProportion: "7.12%",
              profitProportion: "-",
              grossProfitMargin: "-",
            },{
              name: "物业管理",
              income: "88.32万",
              incomeProportion: "4.94%",
              cost: "169.94万",
              costProportion: "13.32%",
              profitProportion: "-15.97%",
              grossProfitMargin: "-92.41%",
            }
          ]
        },{
          type: "按地区",
          data: [
            {
              name: "河南新乡",
              income: "1113.88万",
              incomeProportion: "62.32%",
              cost: "744.60万",
              costProportion: "58.34%",
              profitProportion: "72.25%",
              grossProfitMargin: "33.15%",
            },{
              name: "广东深圳",
              income: "469.66万",
              incomeProportion: "26.28%",
              cost: "383.52万",
              costProportion: "30.05%",
              profitProportion: "16.85%",
              grossProfitMargin: "18.34%",
            },{
              name: "湖南长沙",
              income: "203.87万",
              incomeProportion: "11.41%",
              cost: "148.15万",
              costProportion: "11.61%",
              profitProportion: "10.9%",
              grossProfitMargin: "27.33%",
            }
          ]
        }
      ],
      financialAnalysisList: ["营业收入","净利润","总资产","净资产","经营现金流量净额"],
      financialAnalysis: "营业收入",
      series: [
        {
          name: "营业收入",
          type: "line",
          data: [23, 42, 35, 37, 43, 32, 27, 39, 22]
        }
      ],
      chartOptions: {
        chart: {
          height: 200,
          type: "line",
          toolbar: {
            show: false
          }
        },
        stroke: {
          width: [3],
          curve: "smooth"
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "20%"
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        yaxis: {
          labels: {
            show: false,
            formatter: function (val) {
              return val + '万';
            }
          }
        },
        colors: ["#1cbb8c"],
        labels: ["2013","2014","2015","2016","2017","2018","2019","2020","2021"]
      },
    }
  },
  methods: {
    jump(i){
      if(i==this.items.length-1){
        return;
      }
      this.$router.push(this.items[i].url)
    },
    changefinancialAnalysis(v){
      if(this.financialAnalysis == v){
        return;
      }
      this.financialAnalysis = v;
      this.series[0].name = v
      if(v=='营业收入'){
        let data = [23, 42, 35, 37, 43, 32, 27, 39, 22]
        this.series[0].data = data
      }else if(v=='净利润'){
        let data = [13, 32, 22, 21, 23, 12, 18, 19, 13]
        this.series[0].data = data
      }else if(v=='总资产'){
        let data = [13, 22, 25, 27, 23, 12, 17, 19, 12]
        this.series[0].data = data
      }
      this.$refs.chart.updateOptions({
        series:this.series,
        labels:this.chartOptions.labels
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.card-title{
  font-size: 18px;
  font-weight: 600;
  img{
    width: 30px;
    height: 30px;
  }
}
.basicInfo{
  div{
    display: inline-block;
    margin-right: 20px;
  }
  div:last-child{
    margin-right: 0px;
  }
}
#post_statement {
  font-size: 12px;
  text-align: center;
}
.newstyle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .breadcrumb-item{
    span{
      cursor: pointer;
    }
  }
  .breadcrumb-item:last-child{
    span{
      cursor: default;
    }
  }
}
.title_right{
  font-weight: normal;
  font-size: 0.7rem;
  color: #74788d;
}
.table-responsive{
  margin-bottom: 2rem;
}
.tb,th {
  background: #F2F9FC;
}
th{
  text-align: center;
}
</style>
